<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /* From Uiverse.io by Praashoo7 */
    .loader {
        position: relative;
        background-color: white;
        padding-left: 1.5em;
        padding-right: 1.5em;
        padding-top: 3em;
        top: -0.4em;
        border-radius: 25px;
        z-index: -1;
        box-shadow: 5px 2px 0px #666666;
    }

    .clock {
        position: relative;
        top: -1.4em;
        left: 0.05em;
    }

    .stage {
        position: relative;
        left: 0.5em;
        background-color: black;
        width: 4em;
        height: .4em;
        border-radius: 15px;
        box-shadow: 2px 2px 0px #666666;
        z-index: 4;
    }

    .hold {
        position: relative;
        background-color: limegreen;
        width: 0.1em;
        height: 4em;
        left: 2.5em;
        top: -.25em;
        animation: 1.3s dangle infinite;
        box-shadow: 4px 4px 0px #666666;
        z-index: -1;
    }

    @keyframes dangle {
        0% {
            transform-origin: top center;
            transform: rotate(45deg);
        }

        50% {
            transform-origin: top center;
            transform: rotate(-45deg);
        }

        100% {
            transform-origin: top center;
            transform: rotate(45deg);
        }
    }

    .ball {
        display: inline-block;
        position: relative;
        top: 3em;
        left: -1.2em;
        width: 2.5em;
        height: 2.5em;
        margin: 0;
        border-radius: 50%;
        background: #171717;
        box-shadow: 1px 1px 0px #666666;
    }
</style>
<body>
<!-- From Uiverse.io by Praashoo7 -->
<div class="loader">
    <svg  viewBox="0 0 80 80" height="80px" width="80px" y="0px" x="0px"  id="Layer_1" version="1.1" class="clock">  <image href="" y="0" x="0" height="80" width="80" id="image0"></image>
  </svg>
    <div class="stage"></div>
    <div class="hold">
        <div class="ball"></div>
    </div>
</div>
</body>
</html>